<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    ref="chart"
    v-ui-ref="vSetRef"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import { barOption, moreTypeOptions } from './chartOptionJson.js'
  import { barResponse } from './chartResponseJson.js'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'UiBarChart',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        designByUser: [],
        inter: null,
      }
    },
    watch: {
      'info.extension': {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
            // this.initChart()
          })
        },
        deep: true,
      },
      getSelectModule: {
        handler(val, oldVal) {
          if (!oldVal.extension) {
            if (barOption[val.chartTypeValue] || moreTypeOptions[val.chartTypeValue]) {
              this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = false)
            } else {
              this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = true)
            }
          }
          if (
            val.extension &&
            oldVal.extension &&
            val._id != oldVal._id &&
            this.getSelectModule.extension &&
            this.getSelectModule.extension.requestSet
          ) {
            this.getSelectModule.extension.requestSet.value.isJson = false
          }
          if (
            barResponse[val.chartTypeValue] &&
            this.getSelectModule.extension &&
            this.getSelectModule.extension.requestSet &&
            !this.getSelectModule.extension.requestSet.value.isJson &&
            this.getSelectModule.extension.requestSet.value.resList.length == 0
          ) {
            this.getSelectModule.extension.requestSet.value.isJson = true
            this.getSelectModule.extension.requestSet.value.resList = barResponse[val.chartTypeValue]
          }
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      if (this.info.extension.firstGetData?.value === false) {
        return
      }
      this.$nextTick(() => {
        // if (barResponse[this.info.chartTypeValue] && this.infoComponent.extension.requestSet.value.resList.length == 0) {
        //   this.infoComponent.extension.requestSet.value.isJson = true
        //   this.infoComponent.extension.requestSet.value.resList = barResponse[this.info.chartTypeValue]
        // } else if (!barResponse[this.info.chartTypeValue] && this.infoComponent.extension.requestSet.value.resList.length == 0) {
        //   this.infoComponent.extension.requestSet.value.resList.push({
        //     name: 'EDITWHO',
        //     id: this.infoComponent.extension.series.value[0].name,
        //     value: 'QTY',
        //   })
        // }
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      console.warn('退出----------------------')
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        if (barResponse[this.info.chartTypeValue] && this.infoComponent.extension.requestSet.value.resList.length == 0) {
          this.infoComponent.extension.requestSet.value.isJson = true
          this.infoComponent.extension.requestSet.value.resList = barResponse[this.info.chartTypeValue]
        } else if (!barResponse[this.info.chartTypeValue] && this.infoComponent.extension.requestSet.value.resList.length == 0) {
          this.infoComponent.extension.requestSet.value.resList.push({
            name: 'EDITWHO',
            id: this.infoComponent.extension.series.value[0].name,
            value: 'QTY',
          })
        }
        let obj = {}
        console.log('进入-------------2-', JSON.stringify(this.infoComponent.extension.requestSet.value.resList))
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.infoComponent.extension.requestSet.value['resList'].map((item) => {
            obj[item.id] = this.$getResponseData(res, item)
          })
          // console.log(obj)
          this.initChart(obj)
        })
      },
      initChart(obj) {
        let dataObj = cloneDeep(obj)
        console.log(dataObj, this.infoComponent.extension.requestSet.value['resList'], this.info.chartTypeValue)
        // const moduleId = this.hasPreview ? this.info._id : `diy_${this.info._id}`
        let chartDom = this.$refs.chart
        let myChart = echarts.init(chartDom)
        let data = cloneDeep(this.info.extension)
        let option = this.formatterOption(data)
        // console.log('data',JSON.stringify(option))
        let barOptions = cloneDeep(barOption)
        let series = barOptions[this.info.chartTypeValue] || moreTypeOptions[this.info.chartTypeValue]
        if (series) {
          if (this.info.chartTypeValue == 'rowStackBar') {
            option = Object.assign(
              option,
              series(
                dataObj[this.info.chartTypeValue],
                option.color.map((item) => item.v)
              )
            )
          } else if (this.info.chartTypeValue == 'lineAndBar') {
            option = Object.assign(option, series(dataObj))
          } else if (this.info.chartTypeValue == 'lineBar') {
            option = Object.assign(option, series(dataObj))
          } else if (this.info.chartTypeValue == 'stackBar') {
            option = Object.assign(option, series(dataObj))
          } else {
            option = Object.assign(option, series(dataObj[this.info.chartTypeValue]))
          }
        } else {
          option.grid = option.yAxis ? option.yAxis.map((item) => item.grid) : ''
          this.designByUser = this.infoComponent.extension.requestSet.value.resList
          if (option.xAxisPosition) {
            option.xAxis.map((item) => {
              console.log(option.series, item, dataObj)
              item.data = dataObj[option.series.find((cu) => cu.axisIndex == item.gridIndex).name].map((item) => item.name)
              return item
            })
          } else {
            option.yAxis.map((item) => {
              item.data = dataObj[option.series.find((cu) => cu.axisIndex == item.gridIndex).name].map((item) => item.name)
              return item
            })
          }
        }
        option.color = option.color.map((item) => item.v)
        option.legend.textStyle && (option.legend.textStyle.fontSize = this.infoComponent.extension.legend_textStyle_fontSize.value)
        option.grid = option.grid
          ? option.grid
          : {
              show: false,
              left: '20%',
              top: '20%',
              right: '20%',
              bottom: '20%',
              backgroundColor: 'transparent',
            }
        console.log(option.series)
        option.series.map((item) => {
          // if (item.showID) {
          //   item.name = str.slice(index, index + 1)
          // }

          if (!['progressBar', 'rowStackBar', 'lineBar', 'stackBar', 'orgBar'].includes(this.info.chartTypeValue)) {
            item.data = dataObj[item.typeName || item.name]
          }
          if (this.info.chartTypeValue == 'baseBar') {
            item.data.map((cur, index) => {
              cur.itemStyle = { color: option.color[index] ? option.color[index] : option.color[0] }
              return cur
            })
          }
          return item
        })
        console.log('option', JSON.stringify(option))
        option && myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .uiBarChart {
    width: 100%;
    height: 100%;
  }
</style>
